//页面中的数据
var data = [
    { id: 1, name: "轻型步战车维修手册", dataType: '维修一部', type: '装备使用', model: 'A01轻型步战车' },
    { id: 2, name: "轻型步战车维修手册", dataType: '维修二部', type: '装备使用', model: 'A01轻型步战车' },
    { id: 3, name: "轻型步战车维修手册3", dataType: '维修一部', type: '装备制度', model: 'A04轻型步战车' },
    { id: 4, name: "轻型步战车维修手册", dataType: '维修三部', type: '装备保障', model: 'A01轻型步战车' },
    { id: 5, name: "轻型步战车维修手册", dataType: '维修一部', type: '装备使用', model: 'A01轻型步战车' },
    { id: 6, name: "轻型步战车维修手册", dataType: '维修三部', type: '装备使用', model: 'A01轻型步战车' },
    { id: 7, name: "轻型步战车维修手册7", dataType: '维修一部', type: '装备保障', model: 'A06轻型步战车' },
    { id: 8, name: "轻型步战车维修手册", dataType: '维修三部', type: '装备制度', model: 'A01轻型步战车' },
    { id: 9, name: "轻型步战车维修手册9", dataType: '维修一部', type: '装备使用', model: 'A01轻型步战车' },
    { id: 10, name: "轻型步战车维修手册", dataType: '维修三部', type: '装备保障', model: 'A01轻型步战车' },
    { id: 11, name: "轻型步战车维修手册", dataType: '维修一部', type: '装备使用', model: 'A06轻型步战车' },
    { id: 12, name: "轻型步战车维修手册", dataType: '维修三部', type: '装备保障', model: 'A01轻型步战车' },
    { id: 13, name: "轻型步战车维修手册", dataType: '维修一部', type: '装备制度', model: 'A01轻型步战车' },
    { id: 14, name: "轻型步战车维修手册", dataType: '维修二部', type: '装备使用', model: 'A05轻型步战车' },
    { id: 15, name: "轻型步战车维修手册14", dataType: '维修二部', type: '装备制度', model: 'A01轻型步战车' },
    { id: 16, name: "轻型步战车维修手册", dataType: '维修三部', type: '装备使用', model: 'A01轻型步战车' },
    { id: 17, name: "轻型步战车维修手册", dataType: '维修一部', type: '装备保障', model: 'A02轻型步战车' },
    { id: 18, name: "轻型步战车维修手册", dataType: '维修二部', type: '装备制度', model: 'A01轻型步战车' },
    { id: 19, name: "轻型步战车维修手册", dataType: '维修二部', type: '装备保障', model: 'A03轻型步战车' },
    { id: 20, name: "轻型步战车维修手册20", dataType: '维修三部', type: '装备使用', model: 'A01轻型步战车' },
];
//当前的页码
var page = 1;
//每页的条数
var count = 10;
//获取tbody
var oTBody = document.querySelector('tbody');
//获取分页容器
var oPagination = document.querySelector('.pagination');
// 获取总页数
var oAllDataPage = document.querySelector('.all-data-page');
// 获取总数
var oAllData = document.querySelector('.all-data');
// 跳转按钮
var oJump = document.querySelector('.jump');
//获取上一页的按钮
var oPrevBtn = document.querySelector('#paginationLeft');
//获取下一页的按钮
var oNextBtn = document.querySelector('#paginationRight');
// 添加
var oAddBtn = document.querySelector('.add-classify');
var oCancel = document.querySelector('#cancel');
var oSave = document.querySelector('#save');
var oAddModel = document.querySelector('#addModel');
var oAddType = document.querySelector('#addType');
var oAddDataType = document.querySelector('#addDataType');
//搜索
var oSearchInp = document.querySelector('#dataName');
var oSearchSelect = document.querySelector('#dataModel');
var oSearchSelect2 = document.querySelector('#professionalCategory');
var oUploadFile = document.querySelector('#uploadFile');
//重置
var oResetBtn = document.querySelector('.reset');
//查询
var oInquiryBtn = document.querySelector('.inquiry');
//查看编辑
var oEditBtn = document.querySelector('.edit');
var oConfirmEdit = document.querySelector('.confirmEdit');
//查看下载
var oDownload = document.querySelector('.viewDownload');
var oToConfirm = document.querySelector('.toConfirm');
// 查看返回
var oReturn = document.querySelector('.returnPage');
// 下载
var oConfirmDownload = document.querySelector('.confirmDownload');
//页面初始化的渲染功能
function render() {
    //查看搜索框内容
    var str1 = oSearchInp.value;
    var index = oSearchSelect.selectedIndex;
    var str2 = oSearchSelect.options[index].text;
    var index2 = oSearchSelect2.selectedIndex;
    var str3 = oSearchSelect2.options[index2].text;
    var searchData = [];
    var data1 = [];
    var data2 = [];

    if (str1.trim() == '') {//没有搜索内容
        data1 = data;
    } else {
        for (var i = 0; i < data.length; i++) {
            if (data[i].name.includes(str1)) {
                data1.push(data[i]);
            }
        }
    }
    if (str2 == '全部') {
        data2 = data1;
    } else {
        for (var i = 0; i < data1.length; i++) {
            if (data1[i].dataType.includes(str2)) {
                data2.push(data1[i]);
            }
        }
    }

    if (str3 == '全部') {
        searchData = data2;
    } else {
        for (var i = 0; i < data2.length; i++) {
            if (data2[i].type.includes(str3)) {
                searchData.push(data2[i]);
            }
        }
    }

    //让table为空
    oTBody.innerHTML = '';
    //根据count和page准备要渲染的数据
    var renderArr = searchData.slice((page - 1) * count, page * count);
    // document.querySelector('.all-data-page').innerHTML = Math.ceil(count/10);
    // document.querySelector('.all-data').innerHTML = count;
    //循环要渲染的数据
    for (var i = 0; i < renderArr.length; i++) {
        //创建tr
        var oTr = document.createElement('tr');
        //给tr创建内容
        oTr.innerHTML = `
        <td class = 'serial-number'>${renderArr[i].id}</td>
        <td>${renderArr[i].name}</td>
        <td>${renderArr[i].dataType}</td>
        <td>${renderArr[i].type}</td>
        <td>${renderArr[i].model}</td>
        <td>
        <button class="btn  btn-primary view">查看</button>
        <button class="btn btn-danger download">下载</button>
        </td> 
    `;
        //把tr创建到tbody里面
        oTBody.appendChild(oTr);
    }

    //渲染页码
    //找到所有的页码
    var aPageBtn = document.querySelectorAll('.pageBtn');
    //删除所有的页码
    for (var i = 0; i < aPageBtn.length; i++) {
        oPagination.removeChild(aPageBtn[i].parentNode);
    }
    //根据数据的长度重新创建页码
    for (var i = 1; i <= Math.ceil(data.length / count); i++) {
        //创建li
        var oLi = document.createElement('li');
        //给li创建内容
        oLi.innerHTML = `<a class="pageBtn" href="#">${i}</a>`;
        //如果li和当前的页码一致，给他加一个选中的class
        if (i == page) {
            oLi.classList.add('active');
        }
        //在下一页的前面插入页码
        oPagination.insertBefore(oLi, oPagination.lastElementChild);
    }
}
//一上来就渲染一次数据
render();
//给分页加事件
oPagination.addEventListener('click', changePage);
function changePage() {
    //如果当前点击的按钮有pageBtn这个class名字
    if (event.target.className == 'pageBtn') {
        //修改全局的page
        page = event.target.innerText;
        //渲染table，渲染分页
        render();
    }
}
//给上一页和下一页加事件
oPrevBtn.addEventListener('click', prev);
oNextBtn.addEventListener('click', next);
function prev() {
    if (page > 1) {
        page--;
        render();
    }
}
function next() {
    if (page < Math.ceil(data.length / count)) {
        page++;
        render();
    }
}
// 给跳转按钮加事件
oJump.addEventListener('click', jumpFn);
function jumpFn() {
    var pageNumber = document.querySelector('.page-number').value;
    page = pageNumber;
    render();
}
// 添加
oAddBtn.addEventListener('click', addFn);
function addFn() {
    document.querySelector('.contentBox').style.display = 'none';
    document.querySelector('.contentBox2').style.display = 'block';
}
oUploadFile.addEventListener('click', getFileName)
function getFileName() {
    var oFileName = document.querySelector('.fileName');
    oFileName.innerHTML = '轻型步战车维修手册.word';
}
// 取消
oCancel.addEventListener('click', cancelFn);
function cancelFn() {
    document.querySelector('.contentBox').style.display = 'block';
    document.querySelector('.contentBox2').style.display = 'none';
}
// 保存
oSave.addEventListener('click', saveFn);
function saveFn() {
    var addType = oAddType.value.trim();
    var addDataType = oAddDataType.value.trim();
    var addModel = oAddModel.value.trim();

    if (addType != '' && addDataType != '' && addModel != '') {
        for (var i = 0; i < data.length; i++) {
            var addId = data[i].id + 1;
        }
        data.push({
            id: addId,
            name: '轻型步战车维修手册',
            dataType: addDataType,
            type: addType,
            model: addModel,
        });
    }
    cancelFn();
    render();
}
//搜索
oInquiryBtn.addEventListener('click', searchFn);
function searchFn() {
    page = 1;
    render();
}
//重置
oResetBtn.addEventListener('click', resetFn);
function resetFn() {
    oSearchInp.value = '';
    oSearchSelect.options.selectedIndex = 0;
    oSearchSelect2.options.selectedIndex = 0;
}
// 查看资料
oTBody.addEventListener('click', viewFn);
function viewFn() {
    if (event.target.className.includes('view')) {
        document.querySelector('.contentBox').style.display = 'none';
        document.querySelector('.contentBox3').style.display = 'block';
    }
    if (event.target.className.includes('view')) {
        //找到id
        var id = event.target.parentNode.parentNode.children[0].innerText;
        //循环数据对比
        for (var i = 0; i < data.length; i++) {
            if (data[i].id == id) {
                document.querySelector('.viewDataId').innerHTML = data[i].id;
                document.querySelector('.data-name').innerHTML = data[i].name;
                document.querySelector('.data-model').innerHTML = data[i].model;
            }
        }
    }
    render();
    // 编辑
    oEditBtn.addEventListener('click', editFn);
    function editFn() {
        $('#editModal').modal('show');
        //循环数据对比
        for (var i = 0; i < data.length; i++) {
            if (data[i].id == id) {
                document.querySelector('.editDataId').value = data[i].id;
                document.querySelector('.editName').value = data[i].name;
                document.querySelector('.editDataType').value = data[i].dataType;
                document.querySelector('.editType').value = data[i].type;
                document.querySelector('.editModel').value = data[i].model;
            }
        }
        render();
    }
    oConfirmEdit.addEventListener('click', editContentFn);
    function editContentFn() {
        //看替换的是哪一条；
        var id = document.querySelector('.editDataId').value;
        //循环数据，找到对应的进行更改
        for (var i = 0; i < data.length; i++) {
            if (data[i].id == id) {
                data[i].name = document.querySelector('.editName').value;
                data[i].dataType = document.querySelector('.editDataType').value;
                data[i].type = document.querySelector('.editType').value;
                data[i].model = document.querySelector('.editModel').value;
            }
        }
        //关闭弹框
        $('#editModal').modal('hide');
        //重新渲染
        render();
    }
    // 下载
    oDownload.addEventListener('click', downFn);
    function downFn() {
        $('#viewDownloadModal').modal('show');
        oToConfirm.addEventListener('click', toConfirmFn);
    }
    function toConfirmFn() {
        $('#viewDownloadModal').modal('hide');
    }
}
// 返回
oReturn.addEventListener('click', returnFn);
function returnFn() {
    document.querySelector('.contentBox').style.display = 'block';
    document.querySelector('.contentBox3').style.display = 'none';
}
// 下载
oTBody.addEventListener('click', downLoadFn);
function downLoadFn() {
    if (event.target.className.includes('download')) {
        $('#downloadModal').modal('show');
        oConfirmDownload.addEventListener('click', confirmFn);
    }
}
function confirmFn() {
    $('#downloadModal').modal('hide');
}